<!-- 评论区 panel start-->
<div class="comment" >
    <form class="cl-comment-from" action="/article/comments/save" method="post" id="comment-Form" onsubmit="return false;">
        <input type='hidden' name='comment_arc_id' value='1' id='comment_arc_id' />
        <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
        <input type="hidden" name="comment.articleId" value="#(article.id)"/>
        <div><textarea placeholder="说点什么吧..." rows="1" name="comment.content" id="commentText"></textarea></div>
        <button type="button" id="submitBtn">留言</button>
        <span class="clearfix"></span>
    </form>

    <h4 class="right-card-title" id="allCommentsHeader">全部评论</h4>
    #if(loginAccount??)
    #unauditComments(articleId=article.id,accountId=loginAccount.id)
        #for(comment : comments)
        <div class="comment-panel">
            <div class="comment-panel-portrait">
                <img src="/upload/avatar/#(comment.avatar)" class="img-fluid rounded-circle" alt="">
            </div>
            <div class="comment-panel-content">
                <div class="comment-panel-content-item">
                    <div class="comment-author">#(comment.nickName)</div>
                    <div>#date(comment.created, "yyyy-MM-dd HH:mm")</div>
                </div>
                <div class="comment-panel-content-main">(待审核)#(comment.content)</div>
            </div>
            <span class="clearfix"></span>
            <div class="text-primary"><a href="">回复</a></div>
        </div>
        #end
    #end
    #end
    #articleComments(pageNumber=pn,pageSize=10,articleId=article.id)
        #for(comment : commentPage.getList())
            <div class="comment-panel">
                <div class="comment-panel-portrait">
                    <img src="/upload/avatar/#(comment.avatar)" class="img-fluid rounded-circle" alt="">
                </div>
                <div class="comment-panel-content">
                    <div class="comment-panel-content-item">
                        <div class="comment-author">#(comment.nickName)</div>
                        <div>#date(comment.created, "yyyy-MM-dd HH:mm")</div>
                    </div>
                    <div class="comment-panel-content-main">#(comment.content)</div>
                </div>
                <span class="clearfix"></span>
                <div class="text-primary"><a href="">回复</a></div>
            </div>
        #end
    <!-- 分页 -->
    <div class="row" id="pageRow">
        <div class="col-12">
            #include("_paginate.html")
            #@FrontPaginate(commentPage,"/article/"+article.slug+"?pn=")
        </div>
    </div>
    <!-- 分页 end -->
    #end
</div>

<script type="text/javascript" src="#(tmplPath)/jquery/jquery-3.6.1.min.js"></script>
<script src="/assets/lib/jquery_form/jquery.form.js"></script>
<script src="/assets/lib/layer/layer.js"></script>
<script type="text/javascript" src="/assets/js/jfinal-kit.js"></script>
<script>
    	function submitComment() {
		var $form = $('#comment-Form');
		var loading = kit.loading('正在处理, 请稍候 .....');
		kit.post($form.attr('action'), $form.serialize(), function(ret) {
			loading.close();		// 关闭 loading 层

			if (ret.state == 'ok') {
				layer.closeAll();	// 提交成功关闭 open 弹出层
				$("#commentText").val("");
				console.log("内容1",ret.commentItem);
				console.log("分页4",$("#pageRow"));

                $(ret.commentItem).insertAfter($("#allCommentsHeader"));
			}
			kit.msg(ret, {time:3200, closeBtn:2});
		});
	}
	$("#submitBtn").on("click",submitComment);
</script>